<template>
  <div class="MyBill">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="支付时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['paymentTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="订单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['orderNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['deviceNumber']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="支付号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['payNumer']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="结算状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['settlementStatus']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="2">已结算</a-select-option>
                <a-select-option :value="1">未结算</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="账单类型" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['billType']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="3">已付款</a-select-option>
                <a-select-option :value="4">已退款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findMyBillDetailsPageList()">查询</a-button>
            <a-button type="dashed" @click="listExport()">导出</a-button>
            <a-button htmlType="reset" @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <section>
        <div>
          <p>应收总金额</p>
          <p>{{sumActualAmount}}</p>
        </div>
        <div class="allMoney">
          <p>订单总金额</p>
          <p>{{sumOrderAmount}}</p>
        </div>
        <div>
          <p>手续费总金额</p>
          <p>{{sumChargeAmount}}</p>
        </div>
        <div>
          <p>分润总额</p>
          <p>{{sumProfitAmount}}</p>
        </div>
        <div>
          <p>应收总额</p>
          <p>{{sumReceivableAmount}}</p>
        </div>
      </section>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="billType" slot-scope="text,record">
          <span>{{record.type==3?'已付款':record.type==4?'已退款':''}}</span>
        </template>
        <template slot="settlementStatus" slot-scope="text,record">
          <span>{{record.settlementStatus==1?'未结算':record.settlementStatus==2?'已结算':''}}</span>
        </template>
        <template slot="partnersShareProfits" slot-scope="text,record">
          <span class="blue" @click="showModal(text,record)">{{record.partnerSharingAmount}}</span>
        </template>
      </a-table>
    </a-card>
    <a-modal
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
      :width="700"
      :footer="null"
    >
      <template slot="title">
        <span>{{titlePop}}</span>
      </template>
      <label for>{{orderAmountName}}：</label>
      <span style="color:red">{{orderAmount}}元</span>
      <label style="margin-left:5%">{{profitAmountName}}：</label>
      <span style="color:red">{{profitAmount}}元</span>
      <a-table
        style="margin-top:2%"
        :columns="columnsDetails"
        :dataSource="dataDetails"
        :pagination="false"
        :rowKey="record => record.orderId"
        :bordered="true"
      >
        <template slot="customTitle">{{amountColumns}}</template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "支付时间",
    dataIndex: "payTime",
    scopedSlots: { customRender: "time" },
    align: "center"
  },
  {
    title: "订单号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "支付号",
    dataIndex: "payTn",
    scopedSlots: { customRender: "payNumber" },
    align: "center"
  },
  {
    title: "设备号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "deviceNumber" },
    align: "center"
  },
  {
    title: "账单类型",
    dataIndex: "type",
    scopedSlots: { customRender: "billType" },
    align: "center"
  },
  {
    title: "订单详情",
    dataIndex: "orderDetailsStr",
    scopedSlots: { customRender: "orderDetails" },
    align: "center"
  },
  {
    title: "结算状态",
    dataIndex: "settlementStatus",
    scopedSlots: { customRender: "settlementStatus" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "paidAmount",
    scopedSlots: { customRender: "orderAmount" },
    align: "center"
  },
  {
    title: "手续费",
    dataIndex: "charge",
    scopedSlots: { customRender: "serviceCharge" },
    align: "center"
  },
  {
    title: "总部分润",
    dataIndex: "vendorSharingAmount",
    scopedSlots: { customRender: "headquartersFenRun" },
    align: "center"
  },
  {
    title: "合作方分润",
    dataIndex: "partnerSharingAmount",
    scopedSlots: { customRender: "partnersShareProfits" },
    align: "center"
  },
  {
    title: "应收金额",
    dataIndex: "agentSharingAmount",
    scopedSlots: { customRender: "amountReceivable" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];

const columnsDetails = [
  {
    title: "合作方名称",
    dataIndex: "partnersName",
    scopedSlots: { customRender: "partnerName" },
    align: "center"
  },
  {
    title: "所在点位",
    dataIndex: "posName",
    scopedSlots: { customRender: "point" },
    align: "center"
  },
  {
    title: "分润比例",
    dataIndex: "distributionRatio",
    scopedSlots: { customRender: "proportion" },
    align: "center"
  },
  {
    dataIndex: "amount",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "sum" },
    align: "center"
  }
];
const dataDetails = [
  {
    key: "1",
    orderPaymentTime: "2019/02/09",
    workOrderGeneratedTime: "2019/02/10 10:51:03",
    workOrderNumber: "9049766422641879466",
    processingCompletionTime: "2019/02/10 10:51:03",
    agent: "代理商",
    entryValueSum: "12.45",
    wechatAmount: "6.56",
    alipayAmount: "5.89",
    headquartersFenRun: "1.28",
    partnersShareProfits: "0.56",
    operation: "详情"
  }
];
export default {
  name: "MyBill",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      withdrawVisible: false,
      sumActualAmount: "", //实收总金额
      sumChargeAmount: "", //手续费总金额
      sumOrderAmount: "", //订单总金额
      sumProfitAmount: "", //分润总额
      sumReceivableAmount: "", //应收总额
      visible: false,
      columnsDetails,
      dataDetails: [],
      orderAmount: "", //订单金额
      profitAmount: "", //分润总金额
      titlePop: "",
      orderAmountName: "",
      profitAmountName: "",
      amountColumns: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findMyBillDetailsPageList();
    },
    showModal(text, record) {
      this.visible = true;
      this.detailId = record.id;
      this.type = record.type;
      this.titlePop =
        record.partnerSharingAmount > 0 ? "分润详情" : "分润退款详情";
      this.orderAmountName =
        record.partnerSharingAmount > 0 ? "订单金额" : "实际退款金额";
      this.profitAmountName =
        record.partnerSharingAmount > 0
          ? "合作方分润总金额"
          : "合作方退款分润总金额";
      this.amountColumns =
        record.partnerSharingAmount > 0 ? "分润金额" : "退款分润金额";
      this.findProfitSharingList();
    },
    handleOk(e) {
      this.visible = false;
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },

    // 我的账单列表
    findMyBillDetailsPageList() {
      var values = this.form.getFieldsValue();
      if (values.paymentTime == undefined) {
        values.paymentTime == undefined;
      } else {
        this.startTime = this.$moment(values.paymentTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.paymentTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/findMyBillDetailsPageList",
        data: {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          endTime: this.endTime,
          startTime: this.startTime,
          devCode: values.deviceNumber,
          orderCode: values.orderNumber,
          payTn: values.payNumer,
          status: values.settlementStatus,
          type: values.billType
        }
      }).then(res => {
        // console.log(res);
        this.data = res.data.data.t.list;
        this.sumActualAmount = res.data.data.t.sumActualAmount;
        this.sumChargeAmount = res.data.data.t.sumChargeAmount;
        this.sumOrderAmount = res.data.data.t.sumOrderAmount;
        this.sumProfitAmount = res.data.data.t.sumProfitAmount;
        this.sumReceivableAmount = res.data.data.t.sumReceivableAmount;
        this.pagination.total = res.data.data.total;
        this.pagination.pageSize = res.data.data.pageSize;
        this.pagination.current = res.data.data.pageNum;
      });
    },

    // 导出我的账单
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/exportMyBillDetailsPageList",
        data: {
          loginToken: this.$store.state.loginToken
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "代理商账单表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    },

    // 我的账单合作方分润明细列表
    findProfitSharingList() {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/findProfitSharingList",
        data: {
          loginToken: this.$store.state.loginToken,
          detailId: this.detailId,
          type: this.type
        }
      }).then(res => {
        console.log(res);
        this.dataDetails = res.data.data.list;
        this.orderAmount = res.data.data.orderAmount;
        this.profitAmount = res.data.data.profitAmount;
      });
    }
  },
  created() {
    this.findMyBillDetailsPageList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.MyBill {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
section div p:nth-of-type(1) {
  font-size: 1.2em;
}
section div p:nth-of-type(2) {
  font-size: 1.6em;
}
section div:nth-of-type(1) p:nth-of-type(2) {
  color: red;
}
.allMoney {
  border-left: 2px solid rgb(217, 217, 217);
  padding-left: 10%;
}
.okInfo {
  margin: 4% 0;
}
.okInfo:nth-of-type(1),
.okInfo:nth-last-of-type(1) {
  margin: 0;
}
.okInfo span {
  margin-left: 2%;
}
</style>
